<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>VueLearn-cnblogs/xpwi</title>
		<!--引入自定义的样式-->
		<link rel="stylesheet" href="css/style.css" />
		<!--引入 vue 核心 js-->
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<!--vue-app 是根容器，定义一个 id，然后在 js 里操作-->
		<div id="app-1">
			<h1>APP-1</h1>
			<!--welcome 具体的值是在 js 中定义的-->
			<div>{{name}}</div>
			<div>{{blogUrl}}</div>
			<div>{{csdnUrl}}</div>
			<div>
				<span v-html="csdnHtml">
				</span>
			</div>
			<br />
			<a v-bind:href="blogUrl" target="_blank">blog</a>
			<br />
			<button v-on:click="welcome">打印1</button>
			<br />
			<button v-on:click="good">打印2</button>
			<br />
			<!--方法传参数-->
		</div>
		<div id="app-2">
			<h1>APP-2</h1>
			<div>
				<span v-bind:title="message">
					鼠标悬停几秒钟查看此处动态绑定的提示信息！
				</span>
			</div>
			<div>
				<p v-if="display" v-bind:title="message">是否可见</p>
			</div>
			<ul>
				<li v-for="todo in todoList">
					{{todo.text}}
				</li>
			</ul>
			<div>
				{{msg1}}
				<button v-on:click="reverseMessage">反转</button>
			</div>
			<div>
				{{msg2}}
				<input v-model="msg2" />
			</div>
			<div>
				<ul>
					<todo-item
						v-for="item in groceryList"
						v-bind:todo="item"
						v-bind:key="item.id"
						v-on:click="alertMsg(item.id)"
					></todo-item>
				</ul>
			</div>
		</div>
		<div id="app-3">
			<h1>APP-3</h1>
			<p>{{someattr}}</p>
			<p><input v-model="someattr" /></p>
			<p><a v-bind:[someattr]="info">TEST</a></p>
			<p>{{message}}</p>
			<p>{{reverseMessage}}</p>
			<p>
				<div class="static" v-bind:class="{active: isActive, 'text-danger': hasError}">
					<h1>test</h1>
				</div>
			</p>
		</div>
		<div id="app-4">
			<input v-model="type"/>
			<span v-if="type > 90">A Rank</span>
			<span v-else-if="type <= 90 && type > 60">B Rank</span>
			<span v-else-if="type <= 60 && type > 30">C Rank</span>
			<span v-else>Other Rank</span>
			<br/>
			<div v-if="loginType == 'user'">
				<label>User name</label>
				<input placeholder="Enter your username" key="username-input">
			</div>
			<div v-else>
				<label>Email</label>
				<input placeholder="Enter your email address" key="email-input">
			</div>
			<button @click="toggleLoginType">Toggle login type</button>
		</div>

		
		<!--引入自己的 js，注意必须写在 body 标签里最后，因为必须先加载你的整个 HTML DOM，才回去执行 vue 实例-->
		<script type="text/javascript" src="./js/component.js"></script>
		<script type="text/javascript" src="./js/app1.js"></script>
		<script type="text/javascript" src="./js/app2.js"></script>
		<script type="text/javascript" src="./js/app3.js"></script>
		<script type="text/javascript" src="./js/app4.js"></script>
	</body>
</html>